

<template>
    <div class="jrHumanConfirmMoney">
        <van-nav-bar title="收款信息" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <div v-if="type =='set'">
            <van-cell-group>
                <van-field v-model="info.balance" label="客户当前费用结余" placeholder="请填写合作客户名称" disabled size="large" />
                <van-field v-model="info.price" label="本次投保费用总额" placeholder="" disabled size="large" />
                <van-field v-model="info.invoice_price" label="本次可开票金额" placeholder="" size="large" required />
                <van-field v-model="info.money" label="本次实收款金额" placeholder="" size="large" required />
            </van-cell-group>
            <div class="up-img">
                <div><span style="color: red;">*</span>打款凭证上传</div>
                <van-uploader v-model="business_license" :max-count="1" :after-read="afterRead" :name="1">
                    <img class="up-icon" src="../../assets/img/money_evidence.png" alt="">
                </van-uploader>
            </div>
            <div class="foot-btn">
                <div class="blue-btn" v-if="info.check_state == 1" @click="save">确认</div>
                <div class="blue-btn" @click="pushInfo">保存</div>
                <div class="red-btn" @click="$router.go(-1)">取消</div>
            </div>
        </div>
        <div v-else>
            <van-cell-group>
                <van-field v-model="info.balance" label="客户当前费用结余" placeholder="请填写合作客户名称" disabled size="large" />
                <van-field v-model="info.price" label="本次投保费用总额" placeholder="" disabled size="large" />
                <van-field v-model="info.price" label="本次可开票金额" placeholder="" disabled size="large" />
                <van-field v-model="info.price" label="本次实收款金额" placeholder="" disabled size="large" />
            </van-cell-group>
            <div class="up-img">
                <div>打款凭证上传</div>
                <img class="up-icon" :src="info.annex" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "otherMoney",
    data() {
        return {
            type: '',
            business_license: [], //营业执照
            qiniuToken: '',
            info: {
                balance: '',
                price: '',
                money: '',
                annex: '',
                invoice_price: '',
            }
        };
    },
    methods: {
        // 获取信息
        infoData() {
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                member_goods_id: this.$route.query.id,
            }
            this.$post("/api/Finance/confirm_settlement", params)
                .then(res => {
                    this.info = res.data

                    if (res.data.annex) {
                        this.business_license = [
                            { url: res.data.annex },
                        ]
                    }
                })
                .catch(err => {
                });
        },
        // 获取七牛云token
        getQiniuToken() {
            this.$post("/api/qiniu/up_token", {})
                .then(res => {
                    this.qiniuToken = res
                })
                .catch(err => {
                });

        },
        // 上传图片
        afterRead(file) {
            this.$Toast.loading({
                message: '上传中',
                duration: 0,
                forbidClick: true
            });
            this.$QiniuUpload(this.qiniuToken, file)
                .then(res => {
                    this.$Toast.clear();
                    this.business_license = [
                        { url: this.qiniuToken.domain + res.key },
                    ]
                    this.info.annex = this.qiniuToken.domain + res.key
                })
                .catch(err => {
                    this.$Toast.clear();
                });

        },
        // 保存收款信息
        pushInfo() {
            if (!this.info.annex || this.business_license.length == 0) {
                this.$Toast('请上传打款凭证');
                return;
            }
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                member_goods_id: this.$route.query.id,
                member_id: this.info.member_id,
                money: this.info.money,
                annex: this.info.annex,
                cate_id: this.info.cate_id,
                invoice_price: this.info.invoice_price,
            }
            this.$post("/api/Finance/confirm_settlement_save", params)
                .then(res => {
                    this.$Toast(res.msg);
                    if (res.code == 1) {
                        this.$router.go(-1)
                    }
                })
                .catch(err => { });
        },
        save() {
            this.$dialog.confirm({
                title: '提示',
                message: '确认收款么？'
            }).then(() => {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    id: this.$route.query.id,
                }
                this.$post("/api/finance/check_bill", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast(res.msg);
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                        } else {

                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => { });
            }).catch(() => {
                // on cancel
            });

        },
    },
    created() {
        // 实例创建完成
        this.type = this.$route.query.type
        this.infoData();
        this.getQiniuToken()
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#fff");
    }
}
</script>

<style scoped lang='less'>
.up-img {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 13px;
    padding-right: 15px;
    margin-bottom: 15px;

    > div:nth-of-type(1) {
        margin-left: 13px;
        margin-right: 22px;
    }

    .up-icon {
        width: 57vw;
    }
}

.foot-btn {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}
</style>